<template>
  <div>
    <!-- 列表 -->
    <basic-layout title="商品收藏" :showAddBtn="false">
      <div class="columnFlex">
        <!-- 查询条件 -->
        <van-row class="search-row">
          <van-search
            v-model="formData.keyword"
            maxlength="20"
            show-action
            label=""
            placeholder="商品名称"
            @search="onRefresh"
          >
            <template #action>
              <div @click="onRefresh">搜索</div>
            </template>
          </van-search>
          <div class="filter-icon">
            <van-icon
              name="filter-o"
              @click="$refs.queryPopupRef.show = true"
            />
          </div>
        </van-row>
        <!-- 筛选条件弹出框 -->
        <queryPopup
          ref="queryPopupRef"
          @handleSearch="onRefresh"
          @handleReset="handleReset"
        >
          <van-form class="filterBox">
            <label>库存状态</label>
            <van-field>
              <template #input>
                <div class="textCon" @click="showStatus = true">
                  <span v-if="!statusLebal" style="color: #aaa"
                    >请选择库存状态</span
                  >
                  <span v-else>{{ statusLebal }}</span>
                </div>
              </template>
            </van-field>
            <label>平台分类</label>
            <van-field>
              <template #input>
                <div class="textCon" @click="showArea = true">
                  <span v-if="!assortLebal" style="color: #aaa"
                    >请选择平台分类</span
                  >
                  <span v-else>{{ assortLebal }}</span>
                </div>
              </template>
            </van-field>
          </van-form>
        </queryPopup>
        <van-row class="listCon">
          <van-pull-refresh
            class="pullRefresh"
            v-model="refreshLoading"
            @refresh="onRefresh"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="listData.length ? '没有更多了' : ''"
              @load="onLoad"
            >
              <van-swipe-cell v-for="item in listData" :key="item.orderNo">
                <div class="cellContent" @click="handleDetail(item)">
                  <div class="van-card__header">
                    <a class="van-card__thumb">
                      <div class="van-image" style="width: 100%; height: 100%">
                        <img
                          v-if="item.salesStatus !== '1'"
                          class="bgImg"
                          src="../../../../assets/images/offShlf.png"
                          alt=""
                        />
                        <img
                          :src="
                            fileUrlObj[item.goodsMainFileCode] ||
                            (loading ? 'loading.gif' : 'noImgData.png')
                          "
                          class="van-image__img"
                          style="object-fit: cover"
                        />
                      </div>
                    </a>
                    <div class="van-card__content" style="display: block">
                      <p
                        class="van-card__title van-multi-ellipsis--l2"
                        style="font-size: 15px"
                      >
                        {{ item.goodsName }}
                      </p>
                      <div class="price">
                        ¥
                        <span style="font-weight: 600">{{
                          item.startSellingPrice
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <template #right>
                  <van-button
                    square
                    text="删除"
                    type="danger"
                    class="action-button"
                    @click="handleDelete(item)"
                  />
                </template>
              </van-swipe-cell>
            </van-list>
            <van-empty
              v-if="!spinLoading && !listData.length"
              class="custom-image"
              :image="require('../../../../assets/images/empty.png')"
              description="暂无数据"
            />
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>
    <full-loading v-if="spinLoading"></full-loading>

    <!-- 是否代填报选择 -->
    <van-action-sheet
      v-model="showStatus"
      cancel-text="取消"
      :actions="statusData"
      @select="selectConfirm"
    />
    <van-popup v-model="showArea" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择平台分类"
        :options="dataList"
        @change="loadData"
        @close="showArea = false"
        @finish="onFinish"
      />
    </van-popup>
    <!-- 新增/详情/编辑 弹出框 -->
    <fullscreenModal
      :modal="fullscreenModal"
      :isAdd="false"
      label="商品"
      :isShowEdit="false"
      editType="detail"
      @handleClose="fullscreenModal = false"
      @handleSave="$refs.editFormRef.handleSave()"
    >
      <detail ref="detailRef"></detail>
    </fullscreenModal>
  </div>
</template>

<script>
import { queryFileList } from "@/api/common";
import { queryGetList } from "@/api/srvAssurance/shoppingMall";
import {
  goodFavPage,
  goodDelFav,
} from "@/api/srvAssurance/shoppingMall/markeApi";
import detail from "../goodsChoose/detail";

export default {
  components: { detail },
  data() {
    return {
      formData: {
        keyword: "",
        platformCategoryCode: "",
        stockStatusCode: "0",
        pageNum: 1,
        pageSize: 20,
      },
      loading: false,
      spinLoading: false,
      finished: false,
      showModal: false,
      refreshLoading: false,
      fullscreenModal: false,
      showStatus: false,
      showArea: false,
      totalPage: 0, //总页数
      listData: [], // 列表数据
      dataList: [],
      statusData: [
        {
          value: "0",
          name: "全部",
        },
        {
          value: "1",
          name: "有货",
        },
        {
          value: "2",
          name: "无货",
        },
        {
          value: "3",
          name: "下架",
        },
      ],
      assortLebal: "",
      cascaderValue: "",
      statusLebal: "",
      fileUrlObj: {}, // 保存当前查看详情的row数据
    };
  },
  mounted() {
    this.getSearch();
    this.queryDicData();
  },
  methods: {
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getSearch();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getSearch();
    },
    // 获取表格数据
    getSearch() {
      let filecodeArr = [];
      this.spinLoading = true;
      goodFavPage(this.formData)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            this.listData = [...this.listData, ...res.data.records];
            this.listData.forEach((val) => {
              if (
                val.goodsMainFileCode &&
                !this.fileUrlObj[val.goodsMainFileCode]
              ) {
                filecodeArr.push(val.goodsMainFileCode);
                this.fileUrlObj[val.goodsMainFileCode] = "";
              }
            });
            if (filecodeArr.length) {
              this.queryFileInfoData(filecodeArr);
            }
            if (this.listData.length >= res.data.total) {
              this.finished = true;
            }
          } else {
            this.finished = true;
          }
          setTimeout(() => {
            this.spinLoading = false;
          }, 400);
        })
        .catch(() => {
          this.spinLoading = false;
          this.finished = true;
        });
    },

    // 获取图片信息
    queryFileInfoData(filecodeArr) {
      this.loading = true;
      queryFileList(filecodeArr)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            res.data.forEach((item) => {
              this.fileUrlObj[item.fileCode] = item.url;
            });
            this.$forceUpdate();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 是否代填报选择
    selectConfirm(item) {
      this.formData.stockStatusCode = item.value;
      this.statusLebal = item.name;
      this.showStatus = false;
      this.onRefresh();
    },

    loadData(item) {
      item.loading = true;
      queryGetList(item.value).then((res) => {
        item.loading = false;
        if (res.code == "1000") {
          let data = res.data;
          data = this.operationTree(data);
          if (item.tabIndex == 0) {
            item.selectedOptions[0].children = data;
          } else {
            item.selectedOptions[1].children = data;
          }
        }
      });
    },
    operationTree(arr) {
      let arrData = [];
      arr.forEach((item) => {
        if (item.categoryLevel == 2) {
          arrData.push({
            value: item.categoryCode,
            text: item.categoryName,
          });
        } else {
          arrData.push({
            value: item.categoryCode,
            text: item.categoryName,
            level: item.categoryLevel,
            children: [],
            // loading: false,
          });
        }
      });
      return arrData;
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish(item) {
      this.showArea = false;
      this.assortLebal = item.selectedOptions
        .map((option) => option.text)
        .join("/");
      this.formData.platformCategoryCode = item.selectedOptions[1].value;
    },
    // 刷新页面
    handleRefresh() {
      this.getWeekCookbookData();
      this.getCarNumByLoginUserData();
    },
    handleDetail(item) {
      this.fullscreenModal = true;
      this.$refs.detailRef.getData(item.goodsId);
    },
    handleDelete(item) {
      this.$Dialog
        .confirm({
          title: "是否确定删除该商品？",
        })
        .then(() => {
          this.spinLoading = true;
          goodDelFav([item.goodsId])
            .then((res) => {
              this.spinLoading = false;
              if (res.code === 1000) {
                this.$Notify({ type: "success", message: "删除成功！" });
                this.onRefresh();
              }
            })
            .catch(() => {
              this.spinLoading = false;
            });
        })
        .catch(() => {});
    },

    queryDicData() {
      queryGetList("-1").then((res) => {
        if (res.code == 1000) {
          let data = res.data;
          data = this.operationTree(data);
          this.dataList = data;
        }
      });
    },

    // 重置
    handleReset() {
      this.formData = {
        keyword: "",
        platformCategoryCode: "",
        stockStatusCode: "0",
        pageNum: 1,
        pageSize: 20,
      };
      this.assortLebal = "";
      this.cascaderValue = "";
      this.statusLebal = "";
      this.onRefresh();
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .van-card__title {
  max-height: 0.95rem;
  font-weight: 500;
  line-height: 0.5rem;
}
.listCon {
  .cellContent {
    .top {
      padding: 0 10px;
      box-sizing: border-box;
      float: left;
    }
    .bottom {
      margin-top: 3px;
      padding: 3px 10px 0;
      border-top: 1px solid #eee;
      clear: both;
    }
    .other {
      margin: 1px;
      text-align: right;
      font-size: 13px;
      float: right;
    }
    p {
      white-space: initial;
    }
  }
  .price {
    color: #e1251b;
    font-size: 18px;
    // margin-top: 10px;
    position: relative;
  }
  .bgImg {
    position: absolute;
    top: -15px;
    left: -16px;
    width: 120px;
    height: 120px;
  }
  .btnRight {
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 0;
    span {
      padding: 5px;
    }
  }
  .flex {
    clear: both;
  }
}
</style>
